<template>

    <div class="searchDialog">
        <van-list v-if="realTimeKeywordList.length">
            <van-cell v-for="(realKeyword, index) in realTimeKeywordList" :key="index"
                @click="toGoodsListByRealTimeKeyword(realKeyword)">
                <span style="float: left;">{{ realKeyword }}</span>
                <van-icon name="arrow" />
            </van-cell>
        </van-list>
        <div v-else>
            <div class="searchHistory">
                <span class="searchHistoryText">历史记录</span>
                <van-icon class="searchDialogIcon" name="delete-o" @click="deleteHistory" />
                <van-tag v-for="(k, index) in historyKeywordList" :key="index" class="searchDialogTag" size="large"
                    plain color="#999" text-color="#333" @click="toGoodsListByRealTimeKeyword(k)">{{ k }}</van-tag>
            </div>
            <div class="searchHot">
                <p class="searchHotText">热门搜索</p>
                <van-tag class="searchDialogTag" size="large" plain color="#999" text-color="#333"
                    v-for="(item, index) in hotKeywordVOList" :key="index" @click="toGoodsListByRealTimeKeyword(item.keyword)">{{ item.keyword }}</van-tag>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue';
import searchApi, { type HotKeywordVOListModel } from '@/api/search'
import { showConfirmDialog, showNotify } from 'vant';
import { useRouter } from 'vue-router';

const router = useRouter()

const props = defineProps<{
    realTimeKeywordList: string[]
}>()

const emit = defineEmits<{
    (e: 'getDefaultKeyword', str: string): void
    (e: 'getRealKeyword', str: string): void
    (e:'refreshHistoryKey'):void
}>()

// 点击实时显示的搜索关键词跳转到商品列表页面
const toGoodsListByRealTimeKeyword = (realKeyword: string) => {
    emit('getRealKeyword', realKeyword)
}

// 存储热门搜索的列表数据
const hotKeywordVOList = ref<HotKeywordVOListModel>([])
// 搜索的关键字
const defaultKeyword = ref('')
// 获取热门搜索列表
const getHotKeywordListData = async () => {
    try {
        let result = await searchApi.getHotKeywordList()
        // console.log(result.data);
        // 存储热门搜素的关键字
        hotKeywordVOList.value = result.data.hotKeywordVOList
        // 存储默认的搜素关键字
        defaultKeyword.value = result.data.defaultKeyword.keyword
        emit('getDefaultKeyword', defaultKeyword.value)

    } catch (error) {
        showNotify({ type: 'danger', message: '获取热门搜索数据失败，请重试' });
    }
}

// 用于存储历史记录的
const historyKeywordList = ref<string[]>([])

// 获取历史记录的函数
const getHistoryListData = () => {
    historyKeywordList.value = JSON.parse(localStorage.getItem('KwdList') as string)

}

// 删除历史记录的回调
const deleteHistory = () => {
    showConfirmDialog({
        title: '提示',
        message:
            '确认删除历史搜索记录么？',
    })
        .then(() => {
            // on confirm
            localStorage.removeItem('KwdList')
            getHistoryListData()
            emit('refreshHistoryKey')
        })
        .catch(() => {
            // on cancel
        });
}
onMounted(() => {
    getHotKeywordListData()
    getHistoryListData()
})
</script>

<style scoped>
.searchDialog {
    height: 100%;
    background-color: #f4f4f4;
}

.searchHistory {
    height: 2.67rem;
    background-color: #fff;
}

.searchHot {
    margin-top: .27rem;
    background-color: #fff;
    padding-bottom: .88rem;
}

.searchHistoryText,
.searchHot {
    font-size: .4rem;
    padding-left: .43rem;
    color: #999;
}

.searchDialogIcon {
    margin-left: 6.93rem;
    font-size: .53rem;
}

.searchHot .searchDialogTag {
    margin-left: -0.05rem;
    margin-right: .43rem;
}

.searchDialogTag {
    margin-left: .35rem;
    margin-top: .27rem;
}

.searchHotText {
    padding-top: .27rem;
}
</style>